<!doctype html>
<head>
  <title>dialog demo</title>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.dialog .dialog-overlay {
	width:100%;
	height:100%;
	opacity: 0.5;
	background:#000;
	position:absolute;
	top:0; left:0;
	z-index:3000;
}
.dialog .dialog-box {
  position:absolute;
	z-index:5000;
  left: 50%;
  top: 30%;
  margin-left: -164px;
  font-size: 14px;
  padding-bottom: 10px;
  border-radius: 5px;
	background:#eee;
	width:328px;
}
.dialog .dialog-header {
    padding: 10px 19px;
    color: #fff;
    background: #676666;
}
.dialog .dialog-header h3{
    margin: 0;
    font-size: 14px;
}
.dialog .dialog-header .btn-close{
  position: absolute;
  right: 10px;
  top: 8px;
  font-family: fantasy;
  cursor: pointer;
}
.dialog .dialog-content {
	padding:10px;
	margin:13px;
	color:#666;
	font-size:11px;
}
.dialog .dialog-footer{
  text-align: center;
}
a.btn {
  position: relative;
  text-align: center;
  background-color: #e33100;
  display: inline-block;
  width: 50px;
  padding: 5px 0 6px;
  margin: 2px;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
}
a.btn:hover {
	background-color: #c33100;
}
</style>

</head>
<body>

<button id="open1"> 打开1</button>
<button id="open2"> 打开2</button>
<button id="open3"> 打开3</button>
<button id="open4"> 打开4</button>
<button id="open5"> 打开5</button>
<button id="close">关闭</button>

<script>
var Dialog = (function(){
  function Modal(){
    this.createDialog();
    this.bindEvent();
  }
  Modal.prototype = {
    defaultOpts: {
      title: '',
      message: '',
      isShowCloseBtn: true,
      isShowConfirmBtn: false,
      onClose: function(){},
      onConfirm: function(){}
    },
    open: function(opts){
      this.setOpts(opts);
      this.setDialog();
      this.showDialog();
    },
    close: function(){
      this.hideDialog();
    },
    setOpts: function(opts){
      if(typeof opts === 'string'){
         this.opts = $.extend({}, this.defaultOpts, {message: opts});
      }else if (typeof opts === 'object'){
         this.opts = $.extend({}, this.defaultOpts, opts);
      }
    },
    bindEvent: function(){
      var _this = this;
      _this.$dialog.find('.btn-close').on('click', function(e){
        e.preventDefault();
        _this.opts.onClose();
        _this.hideDialog();
      });
      _this.$dialog.find('.btn-confirm').on('click', function(e){
        e.preventDefault();
        _this.opts.onConfirm();
        _this.hideDialog();
      });
    },
    //创建Dialog
    createDialog: function(){
      var tpl = '<div class="dialog" style="display:none">'
                + '<div class="dialog-overlay"></div>'
                + '<div class="dialog-box">'
                +   '<div class="dialog-header"><h3></h3><span class="btn-close">x</span></div>'
              	+   '<div class="dialog-content">'
              	+ '</div>'
                + '<div class="dialog-footer">'
                + '  <a href="#" class="btn btn-close">取消</a>'
                + '  <a href="#" class="btn btn-confirm">确定</a>'
                + '</div>'
                + '</div>'
                +'</div>';
      this.$dialog = $(tpl);
      $('body').append(this.$dialog);
    },
    //根据参数设置 Dialog 样式和内容
    setDialog: function(){
      var $dialog = this.$dialog;
      if(!this.opts.title){
        $dialog.find('.dialog-header').hide();
      }
      if(!this.opts.isShowCloseBtn){
        $dialog.find('.dialog-footer .btn-close').hide();
      }
      if(!this.opts.isShowConfirmBtn){
        $dialog.find('.btn-confirm').hide();
      }
      $dialog.find('.dialog-header h3').text(this.opts.title);
      $dialog.find('.dialog-content').html(this.opts.message);
    },
    showDialog: function(){
      this.$dialog.show();
    },
    hideDialog: function(){
      this.$dialog.hide();
    }
  };
  var instance;
  if(!instance){
    instance = new Modal();
  }
  return instance;
})();
$('#open1').on('click',function(){
  Dialog.open('hello, 这里是饥人谷');
});
$('#open2').on('click',function(){
  Dialog.open('<a href="http://jirengu.com">饥人谷</a>');
});
$('#open3').on('click',function(){
  Dialog.open({
    title: '欢迎来到饥人谷',
    message: 'hello',
    isShowCloseBtn: true,
    isShowConfirmBtn: true,
    onClose: function(){
      alert('close')
    },
    onConfirm: function(){
      alert('确定');
    }
  });
});
var tpl = '<ul><li>列表1</li><li>列表2</li><li>列表1</li><li>列表1</li></ul>';
$('#open4').on('click',function(){
  Dialog.open({
    title: '欢迎来到饥人谷',
    message: tpl,
    isShowCloseBtn: true,
    isShowConfirmBtn: true,
    onClose: function(){
      alert('close')
    },
    onConfirm: function(){
      alert('确定');
    }
  });
});
$('#open5').on('click',function(){
  Dialog.open({
    title: '欢迎来到饥人谷',
    message: 'hello',
    isShowCloseBtn: false,
    isShowConfirmBtn: false
  });
});
  $('#close').on('click', function(){
    Dialog.close();
  });
  //Dialog.open('hello');
</script>

</body>